<template>
  <div>
    <el-form :model="form" size="mini" ref="ruleForm" :rules="rules">
      <el-form-item label="文章标题:" :label-width="formLabelWidth" prop="title" >
        <el-input v-model="form.title" autocomplete="off" placeholder="请输入文章标签"></el-input>
      </el-form-item>
      <el-form-item label="文章内容:" :label-width="formLabelWidth" prop="articleBody">
        <quill-editor
          v-model="form.articleBody"
          :options="editorOption"
        ></quill-editor>
      </el-form-item>
      <el-form-item label="视频地址:" :label-width="formLabelWidth" >
        <el-input
          autocomplete="off"
          placeholder="请输入视频地址"
          v-model="form.videoURL"
        ></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeFn">取 消</el-button>
      <el-button
        type="primary"
        @click="submitForm('ruleForm')"
      >确 定</el-button>
    </div>
  </div>
</template>

<script>

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'

import { add, update } from '@/api/hmmm/articles.js'

export default {
  props: {
    reviseArticle: {
      type: Object,
      default: null
    }
  },
  data () {
    return {
      form: {
        title: '', // 文章标题
        articleBody: '', // 文章内容
        videoURL: null // 视频地址
      },

      rules: { // 校验规则
        // 文章标题校验
        title: [
          { required: true, message: '请输入文章标题', trigger: 'blur' }
        ],
        // 文章内容校验
        articleBody: [
          { required: true, message: '请输入文章内容', trigger: 'blur' }
        ]
      },

      formLabelWidth: '90px', // label的宽度

      editorOption: { // 富文本编辑器 项目栏设置
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            [{ list: 'ordered' }, { list: 'bullet' }],
            ['blockquote'],
            ['code-block', 'image', 'link']
          ]
        }
      } // 工具栏配置项
    }
  },

  // 注册组件
  components: { quillEditor },

  methods: {
    submitForm (formName) {
      // 兜底验证
      this.$refs[formName].validate(async (valid) => {
        // console.log(this.$refs)
        if (!valid) return // 判断校验是否通过
        // 判断打开的是新增弹框还是修改弹框
        if (this.reviseArticle.showRevise === false) {
          // 调用api 新增
          await add(this.form)
          // console.log(res)
          // 提示消息
          this.$message.success('添加成功')
          // 清空数据
          this.form = {}
          // 调用父组件中的刷新列表方法
          this.$emit('getArticleList')
        } else {
          // 调用 更新 api
          await update(this.reviseArticle)
          // 提示消息
          this.$message.success('修改成功')
          // 调用父组件中的刷新列表方法
          this.$emit('getArticleList')
        }
      })
    },

    closeFn () {
      // 发送关闭弹框的事件
      this.$emit('close')
      // 重置数据
      this.form = {}
    }
  }
}
</script>

<style scoped lang='scss'>
.dialog-footer {
  margin-left: 560px;
  margin-top: 70px;
}
::v-deep .ql-editor {
  height: 200px;
}
</style>
